<html>
    <head>
        <meta charset="UTF-8">
        <title>时间的冒泡</title>
        <style type = "text/css">
            #box1
            {
                width: 200px;
                height: 200px;
                background-color: yellowgreen;
            }

            #s1
            {
                background-color: white;
            }
        </style>

        <script type="text/javascript">
            window.onload = function()
            {
                /*
                    时间冒泡
                        指的是事件向上传导，当后代元素的时间被触发时，其祖先元素的相同事件也会触发
                        开发中大部分冒泡都是有用的,可以通过事件对象来取消冒泡
                */
               
                event = event || window.event;
                //为s1绑定一个事件响应函数

                var s1 = document.getElementById("s1");
                s1.onclick = function(event)
                {
                    alert("111");
                    //取消冒泡
                    event.cancelBubble = true;
                }

                //为box1绑定一个事件响应函数

                var box1 = document.getElementById("box1");
                box1.onclick = function(event)
                {
                    alert("112");
                    event.cancelBubble = true;
                }

                //为body绑定一个事件响应函数

                document.body.onclick = function(event)
                {
                    alert("113");
                }
            }
        </script>
    </head>

    <body>
        <div id = "box1">
            我是box1
            <span id = "s1">
                我是span
            </span>
        </div>
    </body>
</html>